import React from 'react';
import { Button, Tooltip } from 'antd';
import List from './list';
import CommonListsIndex from '../../../../components/CommonLists/index';
import IndicatorAdd from '../add';

class RelationIndicator extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'indicator';
    this.editComponent = IndicatorAdd;
    this.listsComponent = List;
    this.queryTableParams = {
      ...props.param,
    };
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10,
    };
  }
  componentDidMount() {
    this.freshQueryList();
  }

  getColumns = () => {
    return [
      {
        title: '序号',
        key: 'indicator_id',
        dataIndex: 'indicator_id',
        width: 80,
        render: (text, record, index) => {
          return <>{index + 1}</>;
        },
      },
      {
        title: '指标名称',
        key: 'feature_name',
        dataIndex: 'feature_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className="overflowtext">
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: '所属渠道',
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        render: (text, record) => {
          return <>{text}</>;
        }
      },
      {
        title: '关联产品',
        key: 'product_name',
        dataIndex: 'product_name',
        ellipsis: true,
        render: (text, record) => {
          return <>{text}</>;
        }
      },
      {
        title: '关联事件',
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        render: (text, record) => {
          return <>{text}</>;
        }
      },

      {
        title: '创建/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_user_name
            ? `${record.create_user_name}/${record.update_user_name}`
            : `${record.create_user_name}/${record.create_user_name}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              {content}
            </Tooltip>
          );
        }
      },
      {
        title: '修改时间',
        dataIndex: 'update_time',
        key: 'update_time',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_time ? record.update_time : record.create_time;
          return (
            <Tooltip title={content} placement='topLeft'>
              {content}
            </Tooltip>
          );
        }
      }
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;

    return (
      <div className='inner-content' style={{ marginTop: '-15px', marginBottom: '30px' }}>
        <ListsComponent
          {...this.state}
          rowKey='feature_id'
          queryList={this.freshQueryList}
          columns={this.getColumns()}
          onChangePagination={this.onChangePagination}
        />
      </div>
    );
  }
}

export default RelationIndicator;
